
Ext.namespace('GH.ui', 'GH.ui.forms');

GH.ui.forms.RegistrationForm = Ext.extend(Ext.form.FormPanel, {

  // defaults - can be changed from outside
  border: false,
  frame: true,
  labelWidth: 80,

  url:'/auth/register_user',

  
  initComponent: function() {

    // configure ourselves
    // hard coded config - cannot be changed from outside
    var config = {
      defaultType: 'textfield',
      defaults: {
        anchor: '92%',
        //width: 230,
      },
      monitorValid: true,
      //			,buttonAlign:'right'
      
      items: [
        new Ext.form.TextFieldRemoteVal({
            fieldLabel: 'User Name',
            name: 'reg_username',
            allowBlank:false,       
            remoteValidation: 'onBlur',
            urlRemoteVal: '/auth/validate_uname',
     	    /* Optional, additional parameter(s) (Object or String)*/
     	    paramsRemoteVal: { csrfmiddlewaretoken: Ext.get("hidden-csrf").dom.children[0].children[0].value },  
		}),{
			fieldLabel:"Password",
			name: "reg_password",
			inputType: 'password',
			allowBlank: false,
			blankText:"Input your password",
			minLength: 6,
			maxLength: 10,
		}, {
			fieldLabel:"Re-password",
			name:"repeat-reg-password",
			inputType: 'password',
			vtype: 'password',
			allowBlank: false,
			blankText:"Repeat your password",
			minLength: 6,
			maxLength: 10,
			//initialPassField: 'reg_password'
		},{
        name: 'firstName',
        fieldLabel: 'First Name',
      }, {
        name: 'lastName',
        fieldLabel: 'Last Name',
      },{
          fieldLabel: 'Zip Code',
          name: 'zipcode',
          regex: /^\d{5}(-\d{4})?$/,
          vtypeText:"The from field in format xxxxx-xxxx where all x(s) are numbers",
      },{
        name: 'email',
        fieldLabel: 'E-mail',
        vtype: 'email',
        vtypeText:"The from field should be an email address in the format of user@domain.com",
        allowBlank: false,
      }, new Ext.form.RadioGroup({  
          fieldLabel: 'Register Role',  
          columns: 2, //display the radiobuttons in two columns  
          items: [  
               {boxLabel: 'Patient', name: 'role', inputValue: 'Patient', checked: true},  
               {boxLabel: 'Doctor', name: 'role', inputValue: 'Doctor'},  
          ]  
      })
     ],
      buttons: [{
        text: 'Submit',
        formBind: true,
        scope: this,
        handler: this.submit
      }, {
        text: 'Cancel',
        scope: this,
        handler: function() {
        	if(this.ownerCt) {
        	  this.ownerCt.hide();
        	}
            else
          	  this.hide();
        	
	    }
      }],
      
      listeners: {
    	  'afterrender': {
    		  fn: function() {
    			   // set wait message target
    					this.getForm().waitMsgTarget = this.getEl();
    		  },
    		  scope: this
    		}
      }
    }; // eo config object
    // apply config
    Ext.apply(this, Ext.apply(this.initialConfig, config));

    // call parent
    GH.ui.forms.RegistrationForm.superclass.initComponent.apply(this, arguments);
    
    // call some post_
    this.form.on('registration_successful', this.onRegistrationSuccessful, this); 

  }, // eo function initComponent
  /**
   * Form onRender override
   */
  
  onRender: function() {

    // call parent
	GH.ui.forms.RegistrationForm.superclass.onRender.apply(this, arguments);

  }, // eo function onRender
  
  
  
 
  /**
   * Submits the form. Called after Submit buttons is clicked
   * @private
   */
  
  submit: function() {
    this.getForm().submit({
      url: this.url,
      scope: this,
      success: this.onSuccess,
      failure: this.onFailure,
      params: {
        cmd: 'save',
        csrfmiddlewaretoken: Ext.get("hidden-csrf").dom.children[0].children[0].value
      },
      waitMsg: 'Registering user...'
    });
  } // eo function submit
  /**
   * Success handler
   * @param {Ext.form.BasicForm} form
   * @param {Ext.form.Action} action
   * @private
   */
  ,
  onSuccess: function(form, action) {
	
    Ext.Msg.show({
      title: 'Success',
      msg: 'Registration Successfully',
      modal: true,
      icon: Ext.Msg.INFO,
      buttons: Ext.Msg.OK
    });
    
    form.fireEvent('registration_successful');
  } // eo function onSuccess
  /**
   * Shows Message Box with error
   * @param {String} msg Message to show
   * @param {String} title Optional. Title for message box (defaults to Error)
   * @private
   */
  ,
  showError: function(msg, title) {
    title = title || 'Error';
    Ext.Msg.show({
      title: title,
      msg: msg,
      modal: true,
      icon: Ext.Msg.ERROR,
      buttons: Ext.Msg.OK
    });
  }, // eo function showError
  
  
  //Failure function, see comment above re: success and failure. 
  // You can see here, if login fails, it throws a messagebox
  // at the user telling him / her as much.  
  onFailure:function(form, action){ 
          if(action.failureType == 'server'){ 
              obj = Ext.util.JSON.decode(action.response.responseText); 
              Ext.Msg.alert('Login Failed!', obj.errors.reason); 
          }else{ 
              Ext.Msg.alert('Warning!', 'User Validation Failed' + action.failureType); 
          } 
          form.reset();
  },
  
  onRegistrationSuccessful: function() {
	  if(this.ownerCt) {
			this.ownerCt.hide();
	  }
  	  else
  		this.hide();
  }
}); // eo extend
// register xtype
Ext.reg('RegistrationForm', GH.ui.forms.RegistrationForm);

// application main entry point
/*Ext.onReady(function() {

  Ext.QuickTips.init();

  // invalid markers to sides
  Ext.form.Field.prototype.msgTarget = 'side';

  // create and show window
  var win = new Ext.Window({
    id: 'formloadsubmit-win',
    title: Ext.fly('page-title').dom.innerHTML,
    layout: 'fit',
    width: 350,
    height: 240,
    closable: false,
    border: false,
    items: {
      id: 'formloadsubmit-form',
      xtype: 'exampleform'
    }
  });

  win.show();

}); // eo function onReady
*/// eof